<template>
	<div class="details-page p-5 max-w-[1200px] mx-auto mt-5">
		<div class="res-info-container w-full flex items-center">
			<el-row class="w-full">
				<el-col :xs="24" :sm="10" :md="5" :lg="5" :xl="5">
					<div
						class="res-icon flex items-center justify-center w-full h-60 bg-white rounded-md shadow relative hover:shadow-lg">
						<nuxt-img class="w-[25%]" src="https://lanyunblog.com/favicon.ico" />
						<div
							class="sub-info absolute bottom-0 w-full py-2 px-3 flex justify-evenly items-center">
							<div class="view-count flex items-center flex-col text-blue-500" title="浏览量">
								<icon name="weui:eyes-on-filled" :size="20" />
								<span class="text-xs">1000</span>
							</div>
							<div
								class="collection-count flex items-center flex-col text-blue-300 cursor-pointer"
								title="收藏量">
								<icon name="material-symbols:kid-star" :size="20" />
								<span class="text-xs text-blue-500">10</span>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="14" :md="19" :lg="19" :xl="19">
					<div class="res-info ml-3 p-3">
						<div class="res-category flex items-center">
							<div
								class="main px-3 py-[3px] rounded-md bg-blue-200 text-blue-500 text-xs shadow cursor-pointer flex items-center justify-center">
								AI工具
							</div>
							<icon class="text-blue-500" name="material-symbols:chevron-right" :size="20" />
							<div
								class="sub px-3 py-[3px] rounded-md bg-blue-200 text-blue-500 text-xs shadow cursor-pointer flex items-center justify-center">
								文章写作
							</div>
						</div>
						<div class="res-name py-3 w-full">
							<h1 class="text-2xl text-gray-700 w-full truncate">蓝云博客</h1>
						</div>
						<div class="res-desc text-base text-gray-500">
							Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, est deleniti.
							Ratione magnam vero aperiam nesciunt obcaecati optio eaque dignissimos excepturi?
							Quidem, eveniet quia! Id consequatur sequi sapiente commodi modi.
						</div>
						<div class="res-link mt-3 flex items-center">
							<div
								class="px-3 mr-2 py-[3px] rounded-md bg-blue-200 text-blue-500 text-xs shadow cursor-pointer w-fit flex items-center justify-center">
								链接
							</div>
							<nuxt-link class="text-sm text-blue-500" to="https://lanyunblog.com" target="_blank">
								https://lanyunblog.com
							</nuxt-link>
						</div>
						<div class="controls flex items-center">
							<nuxt-link to="https://lanyunblog.com" target="_blank">
								<div
									class="go-to px-5 h-10 mt-3 text-white w-fit text-sm bg-blue-500 flex items-center justify-center rounded-md cursor-pointer hover:bg-blue-600">
									<span class="ml-1">立即前往</span>
									<icon name="mdi-light:chevron-right" :size="20" />
								</div>
							</nuxt-link>
							<div
								title="问题反馈"
								class="ml-2 px-3 h-10 mt-3 border-2 box-border border-orange-500 text-orange-500 w-fit text-sm flex items-center justify-center rounded-md cursor-pointer hover:bg-orange-300">
								<icon name="solar:shield-warning-bold" :size="20" />
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="res-details flex items-center mt-10">
			<el-row class="w-full">
				<el-col :xs="24" :sm="24" :md="19" :lg="19" :xl="19">
					<div class="desc bg-white rounded-md shadow p-5 hover:shadow-lg">
						<div class="text-content text-gray-700 leading-loose">
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, doloribus libero, vero
							quibusdam sed eius deleniti nam esse adipisci accusamus beatae dignissimos, dolores
							praesentium architecto perferendis cum dolorem sint eum! Lorem ipsum dolor sit amet
							consectetur adipisicing elit. Voluptas nihil quod vel, quam ullam aliquid!
							Consequuntur, inventore unde maxime ratione error voluptatum nostrum obcaecati odio
							in, odit soluta sapiente dolores.
						</div>
						<div class="img">
							<nuxt-img
								src="https://server.lanyunblog.com/static/140c89cb3803d47c1b9bd34b9406aa3d.webp" />
							<nuxt-img
								src="https://server.lanyunblog.com/static/140c89cb3803d47c1b9bd34b9406aa3d.webp" />
							<nuxt-img
								src="https://server.lanyunblog.com/static/140c89cb3803d47c1b9bd34b9406aa3d.webp" />
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5">
					<div class="other-res-container sticky top-1 px-3">
						<div class="other-res w-full px-3 pt-2 pb-5 bg-white rounded-md shadow hover:shadow-lg">
							<div class="title flex items-center w-full text-orange-500">
								<icon name="material-symbols:auto-label" :size="23" />
								<span class="ml-1">相关推荐</span>
							</div>
							<div class="res-list">
								<div class="res-item pt-4" v-for="item in 5">
									<resource-card
										name="蓝云博客"
										:visit-count="1000"
										url="https://lanyunblog.com/"
										desc="一个分享技术、生活、感悟的博客"
										icon="https://lanyunblog.com/favicon.ico" />
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="post-record w-full bg-white p-3 rounded-md shadow hover:shadow-lg mt-3">
			<div class="w-full flex items-center text-orange-500 mb-3">
				<icon name="mynaui:send-solid" :size="20" />
				<span class="ml-1 font-bold">申请收录</span>
			</div>
			<el-row class="w-full" justify="center">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="10">
					<el-form :model="form" label-width="auto">
						<el-form-item label="申请理由">
							<el-input v-model="form.reason" type="textarea" />
						</el-form-item>
						<el-form-item label="网址">
							<el-input v-model="form.url" />
						</el-form-item>
						<el-form-item label="邮箱">
							<el-input v-model="form.email" />
						</el-form-item>
						<el-form-item label="验证码">
							<div class="flex">
								<el-input v-model="form.captcha" />
								<div class="ml-3">123</div>
							</div>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">
								<icon name="mynaui:send-solid" :size="16" />
								<span class="ml-1">提交申请</span>
							</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script name="DetailsPage" lang="ts" setup>
const form = reactive({
	reason: '',
	url: '',
	email: '',
	captcha: '',
});

const onSubmit = () => {
	console.log('submit!');
};
</script>

<style lang="scss" scoped>
.res-icon {
	backdrop-filter: blur(10px);
}

.res-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.5em;
	max-height: calc(1.5em * 3);
}

@media screen and (max-width: 992px) {
	.other-res-container {
		padding: 0;
		margin-top: 15px;
	}
}
</style>
